<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名称" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { apiLogin } from '@/api'
import Cookie from 'js-cookie'
export default {
  data() {
    // 校验用户名称
    const ruleUserName = (rule, value, callback) => {
      if (/[a-z]{3,7}/g.test(value)) {
        callback();
      } else {
        callback(new Error("用户名不正确"));
      }
    };

    // 自定义校验密码
    const rulePassword = (rule, value, callback) => {
      // value:输入框中输入的内容
      // rule: 自定义的校验规则
      // callback:回调函数,用来判断校验成功或者失败

      // 以字母开头,拼接 2-4个字母数字,以特殊字符结尾
      // const rules = /^[a-z]([a-z|0-9]){2,4}/g
      // // test: 正则的规则.test(校验的内容):返回一个boolean值

      // if(rules.test(value)) {
      //   callback();
      // } else {
      //   callback(new Error('密码格式不正确'));
      // }

    };

    return {
      ruleForm: {},
      // 表单验证
      rules: {
        username: [
          {
            //   自定义校验
            validator: ruleUserName,
            trigger: "blur",
          },
        ],
        password: [
          {
            // 非空校验
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            // 长度校验
            min: 4,
            max: 6,
            message: "密码格式不正确，请重新输入",
            trigger: "blur",
          },
          // {
          //   // 自定义校验, rulePassword:校验的方法
          //   validator: rulePassword,
          //   trigger: "blur",
          // },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      apiLogin(this.ruleForm).then(res => {
        // 将token 保存到本地
        Cookie.set('token', res.token)

        this.$message({
          message: '登录成功',
          type: 'success'
        });

        // 跳转页面
        window.location.href = '/'
      })
    },
  },
};
</script>